<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
  <th:block th:include="wx/include :: header('商城分类')" />
</head>
<body ontouchstart>
<div class="category-top">
  <header class='weui-header'>
    <div class="weui-search-bar" id="searchBar">
      <form class="weui-search-bar__form" action="/wx/pro_list" method="get">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="search" class="weui-search-bar__input" id="searchInput" name="search" placeholder="搜索您想要的商品" required>
          <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
          <i class="weui-icon-search"></i>
          <span>搜索您想要的商品</span>
        </label>
      </form>
      <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
  </header>
</div>
<div class="wy-content">
  <aside>
    <div class="menu-left scrollbar-none" id="sidebar">
      <ul>
        <!--<li class="active">酒水食品</li>-->
        <li th:each="classify : ${classifyList}" th:attr="cid=${classify.classifyId}" th:text="${classify.classifyName}"></li>
      </ul>
    </div>
  </aside>
  <section class="menu-right padding-all j-content">
    <ul class="wy-pro-list clear" style="padding-top: 10px;"></ul>
  </section>

</div>
<th:block th:include="wx/include :: foot-black" />
<th:block th:include="wx/include :: footer" />
<script type="text/javascript">
	$(function($){
      $('#sidebar').find('li').first().trigger('click');
	});
    $('#sidebar ul li').click(function(){
        $(this).addClass('active').siblings('li').removeClass('active');
        var cid = $(this).attr('cid');
        var str = '';
        $.post('/wx/goodsByClassify/'+ cid, function (resp) {
            console.log(resp);
            if(resp.code == 0){
                var list = resp.data;
                list.forEach(function(item){

                    var keywordsstr = '';

                    item.keywordsList.forEach((item,index,array)=>{
                        keywordsstr += '<i class="yhq"><em class="label-text">'+ item +'</em></i>';
                    });

                    console.log(keywordsstr);

                    str += '<li class="w-3"><a href="/wx/pro_info/'+ item.goodsId +'"></a>'+
                      '<img src="'+ item.mainImage +'">'+
                      '<div class="protxt">'+
                      '<div class="name">'+ item.goodsName +'</div>'+
                      '<div class="wy-pro-pri">¥<em>'+ item.price +'</em>' +
                            ' &nbsp;&nbsp;<em class="num font-12" style="text-decoration: line-through;color:#999999;">¥'+ item.originalPrice +'</em>'+
                        '<em style="float: right;color:#999999;font-size: 12px;">'+ item.volume +'人付款</em></div>'+
                      '</div>'+
                            '<p class="weui-media-box__desc" >'+item.description+'</p>' +
                        '<div class="promotion-message clear">'
                        + keywordsstr +
                        '</div>'
                      '</li>';
                });
                $('.wy-pro-list').html(str);
            }
        })
    })
</script>
</body>
</html>
